<template>
  <page-layout title="用户列表" class="pageLayout">
    <a-card :bordered="false">
      <Search />
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        rowKey="index"
        :pagination="false"
      >
        <template #actions="record">
          <span class="detail" @click="detail(record)">详情</span>
        </template>
      </a-table>
      <my-pagination :total="total" :payload="payload"></my-pagination>
    </a-card>
  </page-layout>
</template>

<script>
import * as Api from '@/api/userMag.js'
import Search from './search.vue'
import MyPagination from '@/common/myPagination'

export default {
  components: {
    Search,
    MyPagination
  },
  data() {
    const {
      page = '1',
      per_page = '12',
      phone = '',
      username = ''
    } = this.$route.query
    return {
      payload: {
        page: Number(page),
        per_page: Number(per_page),
        phone,
        username
      },
      total: 0,
      columns: [
        { title: '编号', dataIndex: 'index' },
        { title: '用户昵称', dataIndex: 'username' },
        { title: '手机号', dataIndex: 'phone' },
        { title: '操作', scopedSlots: { customRender: 'actions' } }
      ],
      dataSource: []
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const { page, per_page } = this.payload
      const { list, total } = await Api.userList(this.payload)
      this.total = total
      list.map((item, index) => {
        item.index = (page - 1) * per_page + index + 1
      })
      this.dataSource = list
    },
    detail(record) {
      const { id } = record
      this.$router.push({
        path: '/user/detail',
        query: { id }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  color: #1890ff;
  cursor: pointer;
}
</style>
